<template>
	<view>
		<!-- 标题 start -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">已中选项目</block>
		</cu-custom>
		<!-- 标题 end -->
		<!-- 搜索 start -->
		<u-search v-model="title" @search="initData"></u-search>
		<!-- 搜索 end -->
		<!-- 列表 start -->
		<ProjectList v-on="listItemEvent" :config="listItemConfig" v-model="infoList"></ProjectList>
		<!-- 列表 end -->
		<!-- 操作弹窗 start -->
		<uni-popup ref="option" type="dialog">
			<view class="option-dialog col-warpper">
				<view class="title row-warpper">
					更多操作
				</view>
				<view class="row-warpper option">
					<button v-on="detailEvent" class="btn" type="primary">项目详情</button>
					<button v-on="signUpEvent" class="btn" type="primary">我要报名</button>
				</view>
			</view>
		</uni-popup>
		<!-- 操作弹窗 end -->
		<!-- 项目详情弹窗 start -->
		<uni-popup ref="projectDetail" type="dialog">
			<view class="option-dialog">
				<view class="title row-warpper">
					项目详情
				</view>
				<view class="option">
					<scroll-view style="height: 50vh;width: 60vw;" :scroll-y="true">
						<uni-section type="line" title="项目编号">
							{{projectDetail.number}}
						</uni-section>
						<uni-section type="line" title="标题">
							{{projectDetail.xmgg_title}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
						<uni-section type="line" title="是否为政务服务事项中介服务项目采购">
							{{projectDetail.ifzjfwxm|dictNumToString("shifou")}}
						</uni-section>
						<uni-section type="line" title="是否为省重点项目">
							{{projectDetail.ifzdxm|dictNumToString("zdxm")}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
						<uni-section type="line" title="项目编号">
							{{projectDetail.number}}
						</uni-section>
						<uni-section type="line" title="标题">
							{{projectDetail.xmgg_title}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
						<uni-section type="line" title="项目编号">
							{{projectDetail.number}}
						</uni-section>
						<uni-section type="line" title="标题">
							{{projectDetail.xmgg_title}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
						<uni-section type="line" title="项目编号">
							{{projectDetail.number}}
						</uni-section>
						<uni-section type="line" title="标题">
							{{projectDetail.xmgg_title}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
						<uni-section type="line" title="项目编号">
							{{projectDetail.number}}
						</uni-section>
						<uni-section type="line" title="标题">
							{{projectDetail.xmgg_title}}
						</uni-section>
						<uni-section type="line" title="项目名称">
							{{projectDetail.title}}
						</uni-section>
						<uni-section type="line" title="项目联系人">
							{{projectDetail.xmlxr}}
						</uni-section>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 项目详情弹窗 end -->
		<!-- 我要报名弹窗 start -->
		<uni-popup ref="signUp" @ok="sumitProjectRegist" title="项目报名">
			<view class="signUp-dialog">
				<view class="row-warpper title-con">
					<view class="title">项目报名</view>
				</view>
				<view class="option">
					<view class="form-item row-warpper">
						<view class="title">项目名称</view>
						<view class="value">{{projectDetail.xmgg_title}}</view>
					</view>
					<view class="form-item row-warpper">
						<view class="title">中介机构</view>
						<view class="value">{{currentUserDeparts.departName}}</view>
					</view>
					<view class="form-item row-warpper">
						<view class="title">上传资质附件</view>
						<view class="value">
							<button size="mini" type="primary">点击上传</button>
						</view>
					</view>
					<view class="form-item row-warpper">
						<view class="title">其他证明材料</view>
						<view class="value">
							<button size="mini" type="primary">点击上传</button>
						</view>
					</view>
					<view class="form-item row-warpper">
						<view class="title">报名时间</view>
						<view class="value">
							{{nowTime}}
						</view>
					</view>
					<view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
						<button class="cancel-btn" size="mini" type="default">取消</button>
						<button size="mini" type="primary">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 我要报名弹窗 end -->
	</view>
</template>

<script>
	import projectRequest from "../../../common/request/projectRequest.js"
	// import projectRequest from "../../../request/projectRequest.js"
	import ProjectList from "./components/ProjectList.vue"
	import sysRequest from "../../../common/request/sysRequest.js"
	import onlineRequest from "../../../common/request/onlineRequest.js"
	import {
		queryDictItemsByCode
	} from "@/common/request/requestFun/sysRequest.js"
	export default {
		mixins: [projectRequest, sysRequest, onlineRequest],
		components: {
			ProjectList
		},
		created() {
			// 获取部门信息和中介机构主体信息后 加载数据
			// this.getIdentity((res) => {
			this.initData()
			// })
		},
		computed: {
			nowTime() {
				const now = new Date()
				let year = now.getFullYear()
				let month = this.makeDateStr(now.getMonth() + 1)
				let day = this.makeDateStr(now.getDate())
				let hover = this.makeDateStr(now.getHours())
				let minute = this.makeDateStr(now.getMinutes())
				let sec = this.makeDateStr(now.getSeconds())
				return `${year}-${month}-${day} ${hover}:${minute}:${sec}`
			}
		},
		data() {
			return {
				//  --- 数据 ---
				infoList: [],
				title: undefined,
				currentUserDeparts: {}, // 部门信息
				companyInfo: {}, // 主体信息
				activeProject: {}, // 当前项目
				projectDetail: {},
				//  --- 组件配置 ---
				// 列表
				listItemConfig: {
					showArrow: false,
					clickable: false
				},
				listItemEvent: {
					beClick: (item) => {
						this.activeProject = item
						this.getProjectDetail(this.activeProject.id, {}, data => {
							this.projectDetail = data
							this.$refs.option.open()
						})
					}
				},
				// 操作按钮
				detailEvent: { // 项目详情按钮事件
					click: () => {
						this.$refs.projectDetail.open()
					}
				},
				signUpEvent: { // 注册按钮事件
					click: () => {
						this.$refs.signUp.open()
					}
				},
				// 表单抽屉
				detatilDrawerConfig: {
					width: 350,
				},
				signUpDrawerConfig: {
					width: 350
				},
				closeBtnEvent: {
					click: () => {
						this.$refs.projectDetail.close()
					}
				},
				closeBtnConfig: {}
			}
		},
		methods: {
			/**
			 * 提交
			 */
			sumitProjectRegist() {
				cosole.log("", this.currentUserDeparts)
			},
			/**
			 * 处理时间字符串 <10 则加0 >10则不加
			 * @param {Object} timeNum
			 */
			makeDateStr(timeNum) {
				return timeNum < 10 ? `0${timeNum}` : timeNum
			},
			/**
			 * 获取部门信息和中介机构主体信息
			 */
			getIdentity(callback) {
				// 所属部门信息
				this.getCurrentUserDeparts({}, data => {
					data.list.forEach(item => {
						if (item.orgCode === data.orgCode) {
							this.currentUserDeparts = item
						}
					})
					const params = {
						departid: this.currentUserDeparts.id
					}
					// 中介机构主体信息
					this.getCompanyInfo(params, ret => {
						if (ret.total === 0) {
							this.$tip.error("请添加中介机构机构主体信息!")
							return
						}
						if (ret.records[0].bpm_status !== '3') {
							this.$tip.error("中介机构主体信息未审核通过，不能进行项目报名！")
							return
						}
						this.companyInfo = ret.records[0]
						callback()
					})
				})
			},
			/**
			 * 加载数据
			 */
			initData() {
				const params = {
					_t: 1667809808,
					ifxz: 2,
					column: 'createTime',
					order: 'desc',
					field: 'id,,title,yezhuname,xmlxr,xmlxrdh,selectmode_dictText,baoming_dictText,checked_dictText,baojia_dictText,zhongxuan_dictText,action',
					pageNo: 1,
					pageSize: 10
				}
				this.getSearch(params, data => {
					this.infoList = data
				})
			}
		},
		filters: {
			dictNumToString(number, code) {
				const pd = {
					code
				}
				queryDictItemsByCode(pd)
					.then(res => {
						res.data.forEach(item => {
							if (number === item.value) return item.label
						})
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.option-dialog {
		padding: 12px;
		background-color: #ffffff;
		border-radius: 14px;

		.title {
			align-self: stretch;
			justify-content: center;
			padding: 5px;
			color: #909399;
			border-bottom: 1px solid #909399;
		}

		.option {
			padding: 5px;

			.btn {
				margin: 5px;
			}

			.radio-con {
				label {
					margin: 0 5px;

					radio {
						margin-right: 3px;
					}
				}
			}
		}
	}

	.project-detail {
		justify-content: center;
		height: 30vh;
		padding-top: 50px;
		padding: 15px;
	}

	// --- 我要报名弹窗 ---
	.signUp-dialog {
		padding: 12px;
		background-color: #ffffff;
		border-radius: 14px;

		.title-con {
			justify-content: center;
		}

		.title {
			align-self: stretch;
			justify-content: center;
			padding: 5px;
			color: #909399;
			// border-bottom: 1px solid #909399;
		}

		.value {
			width: 65vw;
			white-space: nowrap;
			overflow: scroll;
		}
	}

	.submit-con {
		uni-button {
			margin: 0;
		}

		.cancel-btn {
			margin-right: 5px;
		}
	}
</style>
